<html>
    <!--重点：移动端禁止缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        .screen-adapter {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height:100vh;
            }
        .content-wrap {
            /*宽度、高度自定义*/
            width: 1920px;
            height: 1080px;
            transform-origin: 0 0;
        }
    </style>
    
    <body>
        <div class="screen-adapter">
            <div class="screen-wrap">
                <!--放置组件或者vue插槽-->
            </div>
        </div>
        <script>
            // 获取缩放比例
            const updateScale = () => {
                const container = document.querySelector('.screen-wrap')
                const w = window.innerWidth / props.w
                const h = window.innerHeight / props.h
                // 最小比例
                const minScale = Math.min(w, h)

                // 缩放并垂直居中
                container.style.transform = `scale(${minScale})`

            }
            // 防抖
            const debounce = (fn, t) => {
                const delay = t || 500
                let timer
                return function () {
                    const args = arguments
                    if (timer) {
                    clearTimeout(timer)
                    }
                    const context = this
                    timer = setTimeout(() => {
                    timer = null
                    fn.apply(context, args)
                    }, delay)
                }
            }
            // 设置缩放比例
            updateScale()

            // 监听窗口变化
            const onresize = debounce(() => updateScale(), 100)
            window.addEventListener('resize', onresize)
        </script>
    </body>
</html>